<!-- 搜索视频 -->
<template>
  <div id="searchVideo">
    <van-sticky >
      <van-search v-model="keyWord" placeholder="请输入会员/会员ID/视频标题搜索" show-action shape="round" @search="onSearch">
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
    </van-sticky>

    <c-video @loadMore="getMoreData" :list="videoList" v-if="videoList.length > 0"></c-video>
    <van-empty v-if="!videoList.length" image="search" :description="showLoading ?'抱歉，暂无数据':'加载中...'" />
  </div>
</template>

<script>
import cVideo from "components/video_waterfall";

export default {
  data () {
    return {
      keyWord: "",
      videoList: [],
      showLoading: true,
    };
  },

  activated() {},

  components: {cVideo},

  computed: {},

  mounted() {},

  methods: {
    onSearch() {
      this.videoList = [];
      this.page = 1;
      this.isLoadMore = false;
      this.showLoading = false;
      $http
        .post("plugin.video-share.frontend.video.getList", { page: this.page, search: { kwd:this.keyWord } }, "load")
        .then(response => {
          if (response.result === 1) {
            this.imgPath = this.$store.state.imgPath;
            this.total_page = response.data.list.last_page;
            if (response.data.list.total === 0) {
              this.showLoading = true;
            }
            this.videoList = response.data.list.data;

          } else {
            this.$toast(response.msg);
            this.page = this.page - 1;
            this.isLoadMore = false;
          }
        })
        .catch(err => {
          console.error(err);
        });
    },
    getMoreData() {
      const that = this;
      that.isLoadMore = false; // 防止多次请求分页数据
      this.showLoading = false;
      if (this.page >= this.total_page) {
        this.showLoading = true;
      } else {
        this.page = this.page + 1;
        $http
          .post(
            "plugin.video-share.frontend.video.getList",
            {
              page: that.page,
              search: { kwd:this.keyWord }
            },
            "加载中"
          )
          .then(
            response => {
              if (response.result === 1) {
                let myData = response.data.list.data;
                that.videoList = that.videoList.concat(myData); //数组拼接
              } else {
                that.page = that.page - 1;
                that.isLoadMore = false;
              }
            },
            function(response) {
              // error callback
            }
          );
      }
    },
  }
}

</script>
<style lang='scss' rel='stylesheet/scss' scoped>
</style>